<template>
  <div class="home-recommend-item">
    <i :class="icon"></i>
    <span>{{title}}</span>
    <i class="el-icon-arrow-right" />
  </div>
</template>

<script lang='ts'>
import { Component, Vue, Prop } from "nuxt-property-decorator";

@Component
export default class extends Vue {
  @Prop() title!: string;
  @Prop() icon!: string;
}
</script>

<style lang='less' scoped>
.home-recommend-item {
  .wh(100%, auto);
  .flex-box(row, space-between);
  margin-top: 15px;

  cursor: pointer;
  span {
    width: calc(100% - 50px);
    font-size: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .home-recommend1-icon {
    .wh(24px);
    display: inline-block;
    background: url("~@/assets/images/home/recommend1.png");
    background-repeat: no-repeat;
    background-size: cover;
    margin-right: 5px;
  }
}
</style>